<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>通讯录</title>
    <link rel="stylesheet" href="css/css-comment.css">
    <script src="js/vue2.5.16.js"></script>
    <style>
        .header {
            width: 100%;
            height: .4rem;
            background: #f2dede;
            box-sizing: border-box;
            padding: 0 0.1rem;
            display: flex;
            z-index: 9;
        }

        .header span {
            width: 80%;
            display: inline-block;
            line-height: .4rem;
            text-align: center;
        }

        .header-return, .header-home {
            width: 20%;
            height: .4rem;
            border: none;
            outline: none;
            float: left;
        }

        .header-home {
            float: right;
        }

        /*列表*/
        .records-list {
            position: relative;
        }

        .records-Wrap {
            width: 100%;
            display: flex;
            /*align-items: center;*/
        }

        .records-index {
            text-align: center;
            width: .4rem;
            height: .4rem;
            line-height: .4rem;
            box-sizing: border-box;
            padding: .1rem 0;
        }

        .records-ul {
            flex: 1;
        }

        .records-li {
            width: 100%;
            display: flex;
            align-items: center;
            box-sizing: border-box;
            padding: .1rem 0;
        }

        .records-li img {
            width: .4rem;
            height: .4rem;
            display: inline-block;
        }

        .records-li p {
            flex: 1;
            box-sizing: border-box;
            margin: 0 .2rem 0 .1rem;
            height: .4rem;
            line-height: .4rem;
            border-bottom: 1px solid #eee;
        }

        .records-nav {
            position: fixed;
            right: 0.05rem;
            top: 50%;
            font-size: 0.14rem;
        }

        .records-nav li {
            margin: 0.05rem 0;
        }

        .alert-mask {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 10;
            font-size: 0.15rem;
            display: none;
        }

        .alert-content {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            width: 2.2rem;
            height: 1.4rem;
            background: white;
            -webkit-border-radius: 8px;
            -moz-border-radius: 8px;
            border-radius: 8px;

        }

        .alert-title {
            padding-left: .1rem;
            line-height: .3rem;
            border-bottom: 1px solid #eee;

        }

        .btn-group {
            position: absolute;
            bottom: 0;
            right: 0;
            width: 100%;
            text-align: right;
            border-top: 1px solid #eee;

        }

        .alert-body {
            text-align: center;
            margin-top: .1rem;
        }

        .alert-index {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            width: 1rem;
            height: 0.5rem;
            background: rgba(0, 0, 0, 0.5);
            color: #fff;
            text-align: center;
            line-height: 0.5rem;
            font-size: .2rem;
            -webkit-border-radius: 8px;
            -moz-border-radius: 8px;
            border-radius: 8px;
        }

        .btn-group button {
            width: .4rem;
            height: .4rem;
            margin-right: .1rem;
            font-size: 0.15rem;
        }

        .btn-group button:nth-of-type(2) {
            color: #1b6d8b;
        }
    </style>
</head>
<body>
<div id="app">
    <my-header :header-title="headerTitle" :header-fixed="headerFixed">
        <button slot="left" @touchstart="returnPage" class="header-return">返回</button>
        <button slot="right" @touchstart="home" class="header-home">主页</button>
    </my-header>
    <records-list :records="records" :header-fixed="headerFixed"></records-list>
    <tel-alert :alert-title='alertTitle'></tel-alert>
</div>

<script src="js/rem.js"></script>
<script>
    var vm = new Vue()
    var data = {
        headerTitle: "通讯录",
        records: [
            {
                index: "A",
                user: [
                    {username: "A1", tel: '13656981111'},
                    {username: "A2", tel: '13656981112'},
                    {username: "A3", tel: '13656981113'}
                ]
            }, {
                index: "B",
                user: [
                    {username: "B1", tel: '13656982222'},
                    {username: "B2", tel: '13656982223'},
                    {username: "B3", tel: '13656982224'}
                ]
            }, {
                index: "C",
                user: [
                    {username: "C1", tel: '13656983333'},
                    {username: "C2", tel: '13656983334'},
                    {username: "C3", tel: '13656983335'}
                ]
            }, {
                index: "D",
                user: [
                    {username: "D1", tel: '13656981478'},
                    {username: "D2", tel: '13656981748'},
                    {username: "D3", tel: '13656984178'}
                ]
            }, {
                index: "S",
                user: [
                    {username: "S2", tel: '17756984444'}
                ]
            }
        ]
    }
    Vue.component("my-header", {
        template: ` <div class="header" :style="{'position':headerFixed?'fixed':''}">
                        <slot name="left"></slot>
                        <span>{{headerTitle}}</span>
                        <slot name="right"></slot>
                    </div>`,
        props: {
            "headerTitle": {
                type: String,
                default: "标题"
            },
            "headerFixed": {
                type: Boolean,
                default: false
            }
        }
    })
    Vue.component("records-list", {
        template: `<div class="records-list" :style="{top:headerFixed?'.4rem':''}">
                        <section class="records-Wrap" v-for="item in records" @touchmove="mover=true">
                            <p  ref="scroll" class="records-index">{{item.index}}</p>
                            <ul class="records-ul">
                                <li @touchend="call(item.tel)" class="records-li" v-for="item in item.user">
                                    <img src="./images/userImg.png" alt="头像">
                                    <p>{{item.username}}</p>
                                </li>
                            </ul>
                       </section>
                       <ul class="records-nav" ref="positionIndex">
                          <li v-for="item in userIndex" @touchstart="getScroll">{{item}}</li>
                       </ul>
                </div>`,
        props: {
            'records': {
                type: Array,
                default: function () {
                    return []
                }
            },
            'headerFixed': {
                type: Boolean,
                default: false
            }
        },
        data: function () {
            return {
                mover: false
            }
        },
        mounted: function(){
            this.setPosition()
        },
        //获取用户下标
        computed:
            {
                userIndex: function () {
                    return this.getIndex(this.records)
                }
            }
        ,
        methods: {
            getIndex: function (data) {
                var indexArr = [];
                for (var i = 0, len = data.length; i < len; i++) {
                    if (data[i].index) {
                        indexArr.push(data[i].index);
                    }
                }
                return indexArr;
            }
            ,
            //点击侧边下面滑动
            getScroll: function (ev) {
                var index = this.$refs.scroll;
                for (var i = 0, len = index.length; i < len; i++) {
                    if (index[i].innerHTML == ev.target.innerHTML) {
                        document.documentElement.scrollTop = index[i].offsetTop
                        var text = index[i].innerHTML
                        vm.$emit("appearIndex", text)
                    }
                }
            }
            ,
            //点击拨打
            call: function (tel) {
                if (!this.mover) {
                    vm.$emit('changeTel', tel)
                } else {
                    this.mover = false
                }
            }
            ,
            //右侧上下居中
            setPosition: function () {
                var ih = this.$refs.positionIndex.offsetHeight;
                this.$refs.positionIndex.style.marginTop = -ih / 2 + "px"
            }
        }
    })
    Vue.component("tel-alert", {
        template: `<div class="alert-mask" ref="mask" :style="{background:appear?'rgba(0,0,0,0.5)':'rgba(0,0,0,0)'}">
                    <div v-if="appear" class="alert-content">
                        <p class="alert-title">{{alertTitle}}</p>
                        <p class="alert-body">{{tel}}</p>
                        <p class="btn-group">
                            <button @touchstart="cancel">取消</button>
                            <button @touchstart="confirm">确定</button>
                        </p>
                    </div>
                    <div v-else class="alert-index">{{index}}</div>
                </div>
                `,
        props: {
            'alertTitle': {
                type: String,
                default: "提示"
            }
        },
        data: function () {
            return {
                tel: "",
                index: "",
                appear: true
            }
        },
        mounted: function () {
            vm.$on("changeTel", function (tel) {
                this.tel = tel;
                this.appear = true;
                this.$refs.mask.style.display = "block";
                //this.$refs.mask.style.backgroundColor = "rgba(0,0,0,0.5)";
            }.bind(this));
            vm.$on("appearIndex", function (text) {
                this.index = text;
                this.appear = false;
                this.$refs.mask.style.display = "block";
                //this.$refs.mask.style.backgroundColor = "rgba(0,0,0,0)";
                setTimeout(function () {
                    this.$refs.mask.style.display = "none";
                }.bind(this), 2000)
            }.bind(this))
        },
        methods: {
            cancel: function () {
                this.$refs.mask.style.display = "none"
            },
            confirm: function () {
                this.$refs.mask.style.display = "none"
            }
        }

    })
    new Vue({
        el: "#app",
        data: {
            headerTitle: data.headerTitle,
            records: data.records,
            alertTitle: "拨打",
            headerFixed: true
        },
        methods: {
            returnPage() {
                console.log('返回页面')
            },
            home() {
                console.log("去主页")
            }
        }

    })
</script>
</body>
</html>